.loggingInLoader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 1;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: white;
  animation-fill-mode: forwards;

  .headerWrapper {
    position: relative;
    width: max-content;
    padding-top: 0 !important;

    .zkwallet-logo,
    .projectLogo {
      height: 55px;
      width: max-content;

      @media screen and (max-width: $mobile) {
        height: 35px;
      }
    }

    .badge {
      position: absolute;
      bottom: 100%;
      left: 100%;
      @media screen and (max-width: 390px) {
        left: 80%;
      }
    }
  }

  h1 {
    margin: 0;
    font-size: 36px;
  }

  .hint {
    margin-bottom: 0;
    font-size: 18px;
    position: relative;
    height: 20px;
    width: 100%;
    margin-top: 1rem;
    text-align: center;

    & > div {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: auto;
    }

    .green {
      color: $green;
    }
  }

  @keyframes nuxtLoadingCustom {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @media (max-width: $mobile) {
    padding: 0 5vw;

    h1 {
      font-size: 24px;
      text-align: center;
      line-height: 35px;
    }

    .hint {
      font-size: 16px;
      text-align: center;
    }
  }
}

body.inkline {
  &.-light .loggingInLoader {
    background-color: $mediumGrey;
  }

  &.-dark .loggingInLoader {
    background-color: #1d2039;
  }
}
